<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        /*
            filter  过滤  对已经获取到的网页元素进行过滤
            not filter相反
            has  拥有，直接判定子节点中是否有符合条件的元素

            prev  查找当前兄弟节点中的上一个节点
            next  查找当前兄弟节点中的下一个节点

            find  查找子节点
            index  获取当前节点在兄弟节点中的下标
            eq      通过下标获取指定的元素节点
            attr    设置和修改行间属性
            
            addClass()
            removeClass()

            width()
            innerWidth()  width+padding
            outerWidth()  width+padding+border
            outerWidth(true) width+padding+border+margin

            //两种方法是为了链式绑定的主体
            insertBefore() A插入到B前面 before() B前面是A
            insertAfter()   after()
            appendTo()  插入到子节点的末尾    append()
            prependTo() 插入到字节点的首位    prepend()
            remove()  可以直接删除自己，不用像js一样用父元素删除自己

            on      
            off

            offset()  直接获取当前元素，距离最左边的距离，margin不算
            position()  直接获取，当前元素，距离第一个有定位父节点的距离，margin算在内
            offsetParent() 查找第一个有定位的父节点，如果父节点没有定位就继续往上去找，最终找到HTML节点

        */
       $(function(){
        //    $("div").filter(".box").css("backgroundColor",'red');
            // $("div").not(".box").css("backgroundColor",'red');
            $("div").has(".box").css("backgroundColor",'red');
            $(".box").attr({
                title:'world',
                name:'opl',
                yyy:'zch'
            })

            var i = 0;
            // $(".box").on("click mouseover",function(){
            //     $(this).html(i++);
            // })
            $(".box").on({
                click:function(){
                    console.log(22);
                },
                mouseover:function(){
                    $(this).html(i++);
                }
            })

            //事件委托 第二个参数是触发的对象
            $("ul").on("click","li",function(){
                $(this).html(i++);
            })
            //创建节点
            $("#btn1").click(function(){
                //新增节点
                $(`<li>${i++ *1111}</li>`).appendTo($("ul"));
            })
            $("#cancel").click(function(){
                $("#box").off("click") //取消这个节点的点击事件
                $("#box").off() //取消这个节点的所有事件
            })
       })
    </script>
</head>
<body>
    <div class="box">div1</div>
    <div>div2 <strong class="box"></strong></div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button id="btn1">创建节点</button>
    <button id="cancel">取消事件</button>
</body>
</html>